<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html;charset=utf-8">
    <title>医务管理系统</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'/>
    <link rel="icon" href="../../static/assets/img/icon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <script src="../../static/layui/layui.js"></script>
</head>
<body data-background-color="bg3">

<table class="layui-table" lay-filter="test" id="reserve" lay-data="{id:'id'}"></table>

<script src="${pageContext.servletContext.contextPath}/webjars/jquery/3.1.1/jquery.min.js"></script>

<script type="text/html" id="barDemo">
    <%--    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>--%>
    <%--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>--%>
    <%--    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>--%>
    <a class="layui-btn layui-btn-xs" lay-event="del" style="color: #fff">取消预约</a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    <%--    {{#  if(d.auth > 2){ }}--%>
    <%--    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>--%>
    <%--    {{#  } }}--%>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">预约</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">取消预约</button>
        <%--        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>--%>
    </div>
</script>

<script>
    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };

        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }

        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(
                    RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }

        return fmt;
    }
    var tableLns;
    $(() => {
        layui.use('table', function () {
            let table = layui.table;

            tableLns = table.render({
                id: "reserve",
                elem: '#reserve'
                , url: '${pageContext.servletContext.contextPath}/reserve/Completed'
                // , toolbar: "#toolbarDemo"
                , cols: [[
                    {field: 'RESERVE_NUM', minWidth: 188, title: '预约挂号编号', sort: true}
                    , {
                        minWidth: 163, title: '预约时间', sort: true,
                        templet: function (value) {
                            if (value.TIME_OF_APPOINTMENT == undefined) {
                                return "";
                            }
                            let date = new Date();
                            console.log(value.TIME_OF_APPOINTMENT);
                            date.setTime(value.TIME_OF_APPOINTMENT);
                            let dateFormat1 = date.format("yyyy-MM-dd hh:mm:ss");
                            console.log(dateFormat1);
                            return dateFormat1;
                        }
                    }
                    , {field: "DIAGNOSE_TYPE", title: '看诊类型', minWidth: 86, sort: true}
                    , {
                        title: '科室名称', minWidth: 86, sort: true
                        , templet: function (value) {
                            if (value.MedicalOffice != undefined && value.MedicalOffice.officeName != undefined) {
                                return value.MedicalOffice.officeName;
                            }
                            return "";
                        }
                    }
                    , {
                        title: '医生', minWidth: 86, sort: true
                        , templet: function (value) {
                            if (value.Medical != undefined && value.Medical.name != undefined) {
                                return value.Medical.name;
                            }
                            return "";
                        }
                    }
                    , {field: 'ILLNESS_DESC', title: '病情描述', minWidth: 101}
                    , {field: "FLOW_PROGRESS", title: '流程进度', sort: true, minWidth: 86}
                    , {field: "WARD_TYPE", title: '病房类型', sort: true, minWidth: 86}
                    // , {fixed: 'right', align: 'center', toolbar: '#barDemo', width: 86}
                ]]
                , page: true
            });

            table.on('toolbar(test)', function (obj) {
                console.log(obj);
                let checkStatus = table.checkStatus(obj.config.id);
                console.log(checkStatus);
                switch (obj.event) {
                    //预约用户信息
                    case 'add':
                        layer.open({
                            type: 2,
                            title: '预约挂号',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['380px', '90%'],
                            content: './MakeAnAppointment.jsp',//iframe的url
                            end: function () {
                                console.log("销毁了");
                                tableLns.reload();
                            }
                        });
                        break;
                    case 'delete':
                        let postData = [];
                        let data = checkStatus.data;
                        for (let temp in data) {
                            postData.push(data[temp]["ID"]);
                        }
                        // layer.msg('删除');
                        $.ajax({
                            url: "${pageContext.servletContext.contextPath}/reserve/cancelReservation",
                            data: {
                                id: postData
                            },
                            type: "POST",
                            dataType: "json",
                            success: function (data) {
                                console.log(data);
                                if (data.code != 0) {
                                    //错误提示
                                    layer.msg(data.msg);
                                    return;
                                }
                                //刷新表
                                tableLns.reload();
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                // 通常 textStatus 和 errorThrown 之中
                                // 只有一个会包含信息
                                //this; // 调用本次AJAX请求时传递的options参数
                            }
                        });
                        break;
                    case 'update':
                        layer.msg('编辑');
                        break;
                }
            });
            //工具条事件
            <%--table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"--%>
            <%--    let data = obj.data; //获得当前行数据--%>
            <%--    let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）--%>
            <%--    let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）--%>
            <%--    if (layEvent === 'del') { //删除--%>
            <%--        layer.confirm('真的删除行么', function (index) {--%>
            <%--            console.log(data);--%>
            <%--            // console.log(index);--%>
            <%--            // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存--%>
            <%--            // layer.close(index);--%>
            <%--            //向服务端发送删除指令--%>
            <%--            let id = [];--%>
            <%--            id.push(data.ID);--%>
            <%--            $.ajax({--%>
            <%--                url: "${pageContext.servletContext.contextPath}/reserve/cancelReservation",--%>
            <%--                data: {--%>
            <%--                    id: id--%>
            <%--                },--%>
            <%--                type: "POST",--%>
            <%--                dataType: "json",--%>
            <%--                success: function (data) {--%>
            <%--                    console.log(data);--%>
            <%--                    if (data.code != 0) {--%>
            <%--                        //提示错误--%>
            <%--                        layer.msg(data.msg);--%>
            <%--                        return;--%>
            <%--                    }--%>
            <%--                    //刷新列表--%>
            <%--                    tableLns.reload();--%>
            <%--                    layer.msg(data.msg);--%>
            <%--                    return;--%>
            <%--                },--%>
            <%--                error: function (XMLHttpRequest, textStatus, errorThrown) {--%>
            <%--                    // 通常 textStatus 和 errorThrown 之中--%>
            <%--                    // 只有一个会包含信息--%>
            <%--                    //this; // 调用本次AJAX请求时传递的options参数--%>
            <%--                }--%>
            <%--            });--%>
            <%--            layer.close(index);--%>

            <%--        });--%>
            <%--    }--%>
            <%--});--%>
        });

        $(window).resize(function () {
            let ret = false;
            setTimeout(function () {
                ret = true;
            }, 500);
            setInterval(function () {
                if (ret == true) {
                    return;
                }
                console.log("更新了");
                tableLns.resize();
            }, 100);
        });

    });


</script>
</body>
</html>